<template>
  <div class="app-container">
    <div class="my-define-dialog-title">
      {{title}}
      <div class="my-define-dialog-title-btn">
        <i @click="cancel(false)" class="saas-iconfont saas-icon-caozuo-quanping-shousuo"></i>
      </div>
    </div>
    <el-scrollbar :style="customeStyle" class="my-form-scrollbar">
      <el-form ref="myForm" :model="form" :label-width="labelForm.labelWidth" :label-position="labelForm.labelPosition">
        <el-row>
          <el-col :span="24">
            <el-form-item label="名称" :prop="'label'" :rules="{
                  required: true, message: '请输入表格名称', trigger: 'change'}">
              <el-input v-model="form.label" placeholder="请输入表格名称" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="排序序号" :prop="'sort'" :rules="{
                  required: true, message: '请输入排序序号', trigger: 'change'}">
              <el-input v-model="form.sort" placeholder="请输入排序序号" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="关联快捷表" :prop="'RelateSceneId'">
              <el-cascader clearable style="width: 100%;" :options="sceneList" :props="{ value: 'id',emitPath: false }"
                v-model="form.RelateSceneId" :show-all-levels="true"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所属分组">
              <el-select style="width: 100%;" v-model="form.scenePId" placeholder="请选择">
                <el-option v-for="item in dataList" :key="item.id" :label="item.label" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-scrollbar>
  </div>
</template>

<script>
  import {
    saveScene,
    getScenes
  } from '@/api/system/scene'
  import defaultSettings from '@/settings'
  export default {
    name: 'menu-edit-scene',
    props: {
      Id: {
        type: Number,
        default: 0
      },
      sceneType: {
        type: Number,
        default: 0
      },
      title: {
        type: String,
        default: ''
      },
      data: {
        type: Object,
        default: () => ({})
      },
      dataList: {
        type: Array,
        default: () => ([])
      }
    },
    data() {
      return {
        customeStyle: {
          height: (window.innerHeight - 180) + 'px',
          background: "#fff",
        },
        labelForm: defaultSettings.labelForm,
        form: {
          Id: 0,
        },
        sceneList: []
      }
    },
    created() {
      this.form = this.data
      this.getSceneList()
    },
    methods: {
      // 获取场景列表
      getSceneList() {
        getScenes({
          sceneType: this.sceneType
        }).then(res => {
          if (res.status) {
            this.sceneList = res.outputData.sceneList.filter((item) => {
              return item.visibility
            })
          }
        })
      },
      submitForm() {
        var that = this;
        this.$refs['myForm'].validate(valid => {
          if (valid) {
            saveScene({
              defineSceneId: this.form.id,
              parentId: this.form.scenePId,
              sceneType: this.form.sceneType,
              sceneTitle: this.form.label,
              sort: this.form.sort,
              RelateSceneId: this.form.RelateSceneId
            }).then(res => {
              if (res.status) {
                this.$message({
                  message: this.form.id > 0 ? '修改成功' : '新增成功',
                  type: 'success'
                })
                this.cancel(true);
              }
            })
          }
        })
      },
      cancel(reload) {
        this.$$parent(this, "doCloseScene", reload)
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
